<template>
    <div class="bill">
        <div class="bill_back">
            <div class="go_back" @click="back"></div>
        </div>
        <div class="bill_info">
            <div class="bill_img">
                 <img :src="headPic">
            </div>
            <div class="bill_title" v-text="realName"></div>
            <div class="bill_price" v-text="amount"></div>
            <div class="bill_state">提现失败</div>
            <div class="bill_reason">
                <div class="bill_exp">失败理由：</div>
                <div class="bill_cause">
                    <div class="cause_title" v-text="remark"></div>
                 </div>
            </div>
            <div class="bill_help">
                <span class="help_line"></span> <span class="help_title">以上回答对您有帮助吗</span> <span class="help_line"></span>
            </div>
            <div class="bill_vote">
                <div :class="helped==1?'vote_yesed':'vote_yes'" @click="judge()">有帮助</div>
                <div :class="helped==2?'vote_noed':'vote_no'" @click="judged()">无帮助</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'Bill',
        data () {
             return {
                 amount:"",
                 headPic:"",
                 realName:"",
                 remark:"",
                 helped:"",
                 id:"",
                 token:"",
             }
        },
        created(){
            document.title="明细详情";
            this.amount=this.$route.query.amount; 
            this.remark=this.$route.query.remark; 
            this.helped=this.$route.query.helped; 
            this.realName=this.$route.query.real_name; 
            this.headPic=this.$route.query.head_pic; 
            this.id=this.$route.query.id; 
            if (localStorage.token) {
                this.token=localStorage.getItem('token');
            }else{
               this.$router.push({path:'/login'}); 
            }
        },
        methods:{
            back(){
                this.$router.go(-1);
            },
            judge(){
               this.helped=1; 
               this.posite();
            },
            judged(){
               this.helped=2;
               this.posite();
            },
            posite(){
                    var params = new URLSearchParams();
                    params.append('status',this.helped);       //你要传给后台的参数值 key/value
                    params.append('id',this.id);
                    this.$axios({
                        url:'/v1/user/updateCashHelped',
                        method: 'post',
                        data:params,
                        headers:{
                        'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
                        'Authorization':"bearer "+this.token
                        }
                    })
                    .then(respanse=>{
                        var res=respanse.data;
                        if(res.code==200){
                            Toast(res.msg)
                        }else if(res.code==10000){
                            this.$router.push({path:'/login'});
                        }else{
                            Toast(res.msg)
                        }
                        
                    }) 
            }
        },
    }
</script>    
<style scoped>
.bill_back{width:100%;height:176px;background:#F8F8F8;position: relative;}
.bill_back .go_back{width:60px;height:60px;border-radius:50%;background:url(/static/images/team_go_back.png) no-repeat center center;background-size:100% 100%;opacity: 0.7;position:absolute;left:26px;top:18px;z-index:9999999;}
.bill_info{width:100%;position: relative;top:-80px;border-radius:80px 80px 0 0;background:#FFF;padding-top:60px;}
.bill_info .bill_img{width:92px;height:92px;position: absolute;left:0;right:0;top:-46px;margin:auto;}
.bill_info .bill_img img{width:100%;height:100%;border-radius:50%;}
.bill_title{text-align: center;color:#333333;font-size:28px;}
.bill_price{font-size:40px;color:#000000;text-align: center;margin-top:8px;}
.bill_state{font-size:24px;color:#9B9B9B;text-align: center;margin-top:10px;}
.bill_reason{display:flex;justify-content:space-between;margin-top:52px;}
.bill_reason .bill_exp{padding-left:26px;font-size:28px;color:#9B9B9B;width:160px;}
.bill_reason .bill_cause{width:588px;border-bottom:2px solid #F2F2F2;padding-bottom:26px;}
.bill_cause .cause_title{font-size:28px;color:#9B9B9B;width:532px;}
.bill_help{text-align: center;font-size:28px;color:#9B9B9B;margin-top:292px;}
.bill_help .help_title{padding:0 24px;position: relative;top:8px;}
.bill_help .help_line{width:164px;height:2px;background:#979797;display:inline-block;}
.bill_vote{width:400px;height:56px;line-height:56px;margin:0 auto;display:flex;justify-content:space-between;margin-top:38px;}
.bill_vote .vote_yes{width:172px;line-height:54px;border:2px solid #9B9B9B;font-size:28px;color:#9B9B9B;background:url(/static/images/vote_yes.png) no-repeat left 16px center;background-size:38px 38px;text-indent:64px;}
.bill_vote .vote_no{width:172px;line-height:54px;border:2px solid #9B9B9B;font-size:28px;color:#9B9B9B;background:url(/static/images/vote_no.png) no-repeat left 16px center;background-size:38px 38px;text-indent:64px;}
.bill_vote .vote_yesed{width:172px;line-height:54px;border:2px solid #9B9B9B;font-size:28px;color:#9B9B9B;background:url(/static/images/vote_yesed.png) no-repeat left 16px center;background-size:38px 38px;text-indent:64px;}
.bill_vote .vote_noed{width:172px;line-height:54px;border:2px solid #9B9B9B;font-size:28px;color:#9B9B9B;background:url(/static/images/vote_noed.png) no-repeat left 16px center;background-size:38px 38px;text-indent:64px;}
</style>
